<template>
  <div class="wrapper">
    姓：<input type="text" v-model="fn" /><br />
    名: <input type="text" v-model="ln" />
    <h1>hello {{ name }} age is {{ person.age }}</h1>
    <button @click="changeName">修改名称</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="person">
import { ref, reactive, toRefs, computed } from 'vue'
let fn = ref('hu')
let ln = ref('wei')
let person = reactive({
  age: 27,
  tel: 18040599142,
})
let { age } = toRefs(person)
let name = computed({
  get() {
    return fn.value + '-' + ln.value
  },
  set(val) {
    const [str1, str2] = val.split('-')
    fn.value = str1
    ln.value = str2
  },
})

function changeName() {
  name.value = 'li-shi'
}

function changeAge() {
  age.value += 1
}
</script>

<style scoped>
.wrapper {
  background-color: palegreen;
  font-size: 12px;
  box-shadow: none;
}
</style>
